<script setup>
import Sidebar from "@/components/common/Sidebar.vue";
import "@/assets/css/style.css";
import "@/assets/css/dashboard-bootstrap.css";
import MyHeader from "@/components/common/myHeader.vue"; // 引入新的 Bootstrap 样式文件
import { RouterView } from "vue-router";
</script>


<template>
  <el-container class="app-layout-container">
    <el-aside width="200px">
      <Sidebar />
    </el-aside>

    <el-container>
      <el-header class="app-header-container">
        <my-header />
      </el-header>
      <el-main class="app-main-content">
        <RouterView />
      </el-main>
    </el-container>
  </el-container>
</template>

<style scoped>
.app-layout-container {
  height: 100vh; /* 让最外层容器占满整个视口高度 */
}

.app-header-container {
  padding: 0; /* 移除 header 的默认内边距 */
  height: 60px; /* 固定高度 */
  width: 100%; /* 占满整个宽度 */;
}

.app-main-content {
  padding: 20px; /* 为内容区提供内边距 */
  background-color: #f0f2f5;
  overflow-y: auto; /* 关键：让内容区自己滚动 */
}
</style>
